<template>
  <div id="operation">
  <el-tabs type="border-card">
    <el-tab-pane label="用户信息">
      <ul>
        <!-- <li>{{account}}</li> -->
        <li>证件号码：{{account.certificateNumber}}</li>
        <li>余额：{{account.balance}}</li>
        <li>手机号码：{{account.tel}}</li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="存款">
      <el-form label-width="80px">
        <el-form-item label="存款额：">
          <el-input v-model="save"></el-input>
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="deposit">存入</el-button>
    </el-tab-pane>
    <el-tab-pane label="取款">
      <el-form label-width="80px">
        <el-form-item label="取款额：">
          <el-input v-model="out"></el-input>
        </el-form-item>

      </el-form>
      <el-button type="primary" @click="withdrawal">取出</el-button>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import apis from '../../http/apis/apis'
export default {
  mounted() {
    
  },
  data() {
    return {
      account: JSON.parse(localStorage.account),
      save: '',
      out: ''
    }
  },
  methods: {
    async deposit() {
      const data = await apis.business.deposit({save: Number(this.save), _id: this.account._id, balance: this.account.balance})
      localStorage.setItem('account', JSON.stringify(data.data))
      this.account = data.data
      alert("存钱成功")
    },
    async withdrawal() {
      if(Number(this.out) > this.account.balance) {
        alert('余额不足')
      }else {
        const data = await apis.business.withdrawal({out: Number(this.out), _id: this.account._id, balance: this.account.balance})
        localStorage.setItem('account', JSON.stringify(data.data))
        this.account = data.data
        alert("取钱成功")
      }
      
    },
  }
}
</script>

<style lang="scss">
  #operation{
    .el-tab-pane:nth-child(2),
    .el-tab-pane:nth-child(3) {
      text-align: center;
    }
  }
</style>